<template>
  <div class="vertical-content">
    <el-container>
      <el-header style="position: relative; z-index: 10">
        <sim-toolbar />
      </el-header>
      <!-- 仿真时间 -->
      <simulation-time />
      <el-main>
        <CollapseComp :collapseList="CollapseCompList">
          <template #consoleTitle>
            <CollapseToolbar :items="toolbarItems.consoleToolbarItems" />
          </template>
          <template #sceneTitle>
            <CollapseToolbar :items="toolbarItems.sceneToolbarItems" />
          </template>
          <template #operationTitle>
            <CollapseToolbar :items="toolbarItems.variableToolbarItems" />
          </template>
          <template #breakPointTitle>
            <CollapseToolbar :items="toolbarItems.breakPointToolbarItems" />
          </template>
          <template #console>
            <sim-console />
          </template>
          <template #scene>
            <sim-scene />
          </template>
          <template #operation>
            <sim-variable />
          </template>
          <template #breakPoint>
            <sim-break-point-panel />
          </template>
        </CollapseComp>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, reactive } from "vue";
import SimToolbar from "./Toolbar.vue";
import SimulationTime from "./SimulationTime.vue";
import SimConsole from "./Console.vue";
import SimScene from "./Scene/Scene.vue";
import SimVariable from "./Variable/Variable.vue";
import SimBreakPointPanel from "./Breakpoints/BreakpointPanel.vue";
import { controller } from "@/engine/Controller";
import { Event, ipcRenderer } from "electron";
import * as remote from "@electron/remote";
import { ElMessageBox } from "element-plus";
import CollapseComp from "@/components/collapseComp/CollapseComp.vue";
import CollapseToolbar from "@/components/collapseComp/CollapseToolbar.vue";
import {
  ColorMap,
  CollapseCompList,
  consoleToolbarItems,
  sceneToolbarItems,
  variableToolbarItems,
  breakPointToolbarItems
} from "@/constants/ui";
import { useI18n } from "vue-i18n";
import { SubWinQueryParams } from "@/engine/types/Win";
import { loading } from "@/common/Loading";
import { SimType } from "@/engine/types/Controller";

const toolbarItems = reactive({
  consoleToolbarItems,
  sceneToolbarItems,
  variableToolbarItems,
  breakPointToolbarItems
});

/* entrace */
controller.serviceInit();

const { t } = useI18n();
const currentlevel = ref("INFO");

const dotColor = computed(() => {
  return ColorMap[currentlevel.value as string];
});

onMounted(async () => {
  await controller.checkSimserviceStarted(async () => {
    await controller.simApi.consoleChangeLocale(controller.lang);
    controller.socketService?.start();
    await controller.autoLoadModelData();
    if (controller.instanceTable.isTableSim(controller.type as SimType)) {
      controller.toolbarService.initSimulation();
    } else {
      controller.breakpointsService.refreshFromModel();
    }
    loading.close();
  });

  ipcRenderer.on(
    "SecondPluginInstance",
    (e: Event, data: SubWinQueryParams) => {
      const current_window = remote.getCurrentWindow();
      if (current_window.isMinimized()) current_window.restore();
      current_window.focus();
      ElMessageBox.confirm(t("sim_p_reopen"), t("warning"), {
        confirmButtonText: t("yes"),
        cancelButtonText: t("no"),
        type: "warning",
        closeOnClickModal: false,
      }).then(async () => {
        console.info("SecondPluginInstance get data: ", data);
        controller.modelId = data.modelId;
        controller.type = data.type;
        controller.projectId = data.projectId;
        await controller.toolbarService.finishSimulation();
        controller.serviceInit();
        await controller.autoLoadModelData();
        if (controller.instanceTable.isTableSim(controller.type as SimType)) {
          controller.toolbarService.initSimulation();
        } else {
          controller.modelId = data.modelId;
        }
        controller.breakpointsService.refreshFromModel();
      });
    }
  );

  controller.ipcService.breakpointChange();
});
</script>
<style lang="scss">
.vertical-content > .el-container > .el-header {
  --el-header-padding: 0px;
  --el-header-height: 50px;
}

.vertical-content {
  height: 100%;

  .el-container {
    height: 100%;
  }

  .el-collapse {
    display: flex;
    flex-direction: column;
    height: calc(100% - 12px);
  }

  .el-collapse > .el-collapse-item {
    position: relative;

    &.is-active {
      flex: 1 0 0;
      height: 0;
      border-bottom: 1px solid var(--el-collapse-border-color);
    }

    .el-collapse-item__wrap {
      border-bottom: none;
      height: calc(100% - 49px);

      > .el-collapse-item__content {
        height: 100%;
      }
    }

    .el-collapse-item__header {
      padding-left: 30px;
      height: 28px;
    }

    .el-collapse-item__arrow {
      position: absolute;
      left: 12px;
    }
  }

  .el-collapse-item__header {
    padding-left: 8px;
    background-color: #ecf4ff;
  }
}

.el-collapse-item__content {
  border-top: 1px solid #dcdcdc;
  padding-bottom: 0px;
}
</style>
